<template>
  <div id="editMetadata">
    <el-container>
      <el-header>
        <div>
          <div style="display: inline-block">
            <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                       @click="goBack">返回
            </el-button>
          </div>
          <div style="display: inline-block">|</div>
          <div style="display: inline-block;">
            <div style="padding-bottom: 15px;margin-left:10px">
              <span v-if="!disabled"
                    style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">编辑元数据</span>
              <span v-if="disabled"
                    style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">查看元数据</span>
            </div>
          </div>
          <div style="border-bottom: solid 1px #C9C9C9;"></div>
        </div>
      </el-header>
      <el-container>
        <el-aside style="width: 180px; margin-right: 10px;">
            <div id="menu">
              <MenuItem :item="item" :key="item.name" v-for="item in items" @change-selection="refreshList"></MenuItem>
            </div>
        </el-aside>
        <el-main style="padding: 0px">
          <div style="font-family: PingFangSC-Regular">
            <el-form :inline="true" :model="metadataForm"
                     class="demo-form-inline" :style="{ display: metadataStyle, height: formStyle}">
              <h1 id="Metadata"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>名称</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="metadataForm['title-group']['article-title']"></el-input>
                </div>
                <div class="inline-block">
                  <div>英文名称</div>
                  <el-input size="small" v-if="UTIL.isNotEmpty(metadataForm['title-group']['trans-title-group'])"
                            class="input-with-select" disabled
                            v-model="metadataForm['title-group']['trans-title-group']['trans-title']"></el-input>
                  <el-input v-else size="small" disabled class="input-with-select"/>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>所属栏目中文信息</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="subjData"></el-input>
                </div>
                <div class="inline-block">
                  <div>所属栏目英文信息</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="subjEngData"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>纸质出版日期(日)</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="metadataForm['pub-date']['day']"></el-input>
                </div>
                <div class="inline-block">
                  <div>纸质出版日期(月)</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="metadataForm['pub-date']['month']"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>纸质出版日期(年)</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="metadataForm['pub-date']['year']"></el-input>
                </div>
                <div class="inline-block">
                  <div>第几卷</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="metadataForm['volume']"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>第几期</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="metadataForm['issue']"></el-input>
                </div>
                <div class="inline-block">
                  <div>收稿日期(日)</div>
                  <el-input v-if="UTIL.isNotEmpty(metadataForm['history'])" class="input-with-select" disabled
                            size="small"
                            v-model="metadataForm['history']['date'][0]['day']"></el-input>
                  <el-input v-else class="input-with-select" disabled size="small"/>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>收稿日期(月)</div>
                  <el-input v-if="UTIL.isNotEmpty(metadataForm['history'])" class="input-with-select" disabled
                            size="small"
                            v-model="metadataForm['history']['date'][0]['month']"></el-input>
                  <el-input v-else class="input-with-select" disabled size="small"/>
                </div>
                <div class="inline-block">
                  <div>收稿日期(年)</div>
                  <el-input v-if="UTIL.isNotEmpty(metadataForm['history'])" class="input-with-select" disabled
                            size="small"
                            v-model="metadataForm['history']['date'][0]['year']"></el-input>
                  <el-input v-else class="input-with-select" disabled size="small"/>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>版权人中文</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="metadataForm['permissions']['copyright-holder'][0]"></el-input>
                </div>
                <div class="inline-block">
                  <div>版权人英文</div>
                  <el-input v-if="metadataForm['permissions']['copyright-holder'].length > 1"
                            size="small" class="input-with-select" disabled
                            v-model="metadataForm['permissions']['copyright-holder'][1]['content']"></el-input>
                  <el-input v-else size="small" disabled class="input-with-select"/>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>版权信息中文</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="metadataForm['permissions']['license'][0]['license-p']"></el-input>
                </div>
                <div class="inline-block">
                  <div>版权信息英文</div>
                  <el-input v-if="metadataForm['permissions']['license'].length > 1" size="small"
                            class="input-with-select" disabled
                            v-model="metadataForm['permissions']['license'][1]['license-p'][0]"></el-input>
                  <el-input v-else size="small" disabled class="input-with-select"/>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>版权年</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="metadataForm['permissions']['copyright-year']"></el-input>
                </div>
                <div class="inline-block">
                  <div>DOI</div>
                  <el-input size="small" class="input-with-select" disabled
                            v-model="metadataForm['article-id'][0]['content']"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>基金中文名</div>
                  <el-input v-if="UTIL.isNotEmpty(metadataForm['funding-group'])" size="small" class="input-with-select"
                            disabled
                            v-model="metadataForm['funding-group'][0]['funding-statement']"></el-input>
                  <el-input v-else size="small" disabled class="input-with-select"/>
                </div>
                <div class="inline-block">
                  <div>基金英文名</div>
                  <el-input
                    v-if="UTIL.isNotEmpty(metadataForm['funding-group']) && metadataForm['funding-group'].length > 1"
                    size="small"
                    class="input-with-select" disabled
                    v-model="metadataForm['funding-group'][1]['funding-statement']"></el-input>
                  <el-input v-else class="input-with-select" disabled size="small"/>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>中图分类号</div>
                  <el-input v-if="UTIL.isNotEmpty(metadataForm['article-categories'])
                  && metadataForm['article-categories']['subj-group']
                  .filter(item => item['subj-group-type'] === 'clc').length > 0" v-model="metadataForm['article-categories']['subj-group']
                  .filter(item => item['subj-group-type'] === 'clc')[0]['subject']" class="input-with-select"
                            disabled
                            size="small"></el-input>
                  <el-input v-else class="input-with-select" disabled size="small"/>
                </div>
                <div class="inline-block">
                  <div>文献标识符</div>
                  <el-input v-if="UTIL.isNotEmpty(metadataForm['article-categories'])
                  && metadataForm['article-categories']['subj-group']
                  .filter(item => item['subj-group-type'] === 'dc').length > 0" v-model="metadataForm['article-categories']['subj-group']
                  .filter(item => item['subj-group-type'] === 'dc')[0]['subject']" class="input-with-select"
                            disabled
                            size="small"></el-input>
                  <el-input v-else class="input-with-select" disabled size="small"/>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>证据等级</div>
                  <el-input v-if="UTIL.isNotEmpty(metadataForm['article-categories'])
                  && metadataForm['article-categories']['subj-group']
                  .filter(item => item['subj-group-type'] === 'loe').length > 0" v-model="metadataForm['article-categories']['subj-group']
                  .filter(item => item['subj-group-type'] === 'loe')[0]['subject']" class="input-with-select"
                            disabled
                            size="small"></el-input>
                  <el-input v-else size="small" disabled class="input-with-select"/>
                </div>
              </div>
            </el-form>
            <el-form :inline="true"
                     class="demo-form-inline" :style="{ display: authorStyle, height: formStyle}">
              <h1 id="authorData"></h1>
              <div style="margin-top: 10px; height: 500px;">
                <el-table :data="authorData" style="width: 100%">
                  <el-table-column prop="nameType" label="作者类型"></el-table-column>
                  <el-table-column prop="name" label="名称"></el-table-column>
                  <el-table-column prop="engName" label="英文名称"></el-table-column>
                  <el-table-column prop="address" label="所属单位"></el-table-column>
                  <el-table-column prop="engAddress" label="所属单位英文"></el-table-column>
                  <el-table-column prop="email" label="邮箱"></el-table-column>
                </el-table>
              </div>
            </el-form>
          </div>
        </el-main>
      </el-container>
      <el-footer style="height: 30px; margin-top: 30px;">
        <div style=" text-align: left">
          <el-button size="small" @click="goBack">取消</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>

</template>

<script>
import MenuItem from "../common/MenuItem";

export default {
  name: "JournalMetadata",
  components: {
    MenuItem,
  },
  data() {
    return {
      metadataForm: {},
      authorData: [],
      disabled: true,
      items: [{
        name: '元数据',
        selected: true,
      }, {
        name: '作者',
        selected: false,
      }],
      subjData: '',
      subjEngData: '',
      metadataStyle: '',
      authorStyle: 'none',
      formStyle: '',
    }
  },
  methods: {
    goBack: function () {
      this.$router.push("/journalLib/Detail");
    },
    refreshList(item) {
      window.location.href = '#' + item.name;
      this.setAllItemsUnselected();
      this.setSelectedItem(item);
      this.metadataStyle = 'none';
      this.authorStyle = 'none';
      if (item.name === '元数据') {
        this.metadataStyle = '';
      }
      if (item.name === '作者') {
        this.authorStyle = '';
      }
    },
    setAllItemsUnselected() {
      this.items.forEach(item => {
        item.selected = false;
      });
    },
    setSelectedItem(selectedItem) {
      this.items.forEach(item => {
        if (item.name === selectedItem.name) {
          item.selected = true;
        }
      });
    },
    joinCatalog(subjGroup, subjDataStr) {
      if (Object.prototype.toString.call(subjGroup) == '[object Object]') {
        subjDataStr.push(subjGroup['subject'])
      } else {
        subjDataStr.push(subjGroup[0]['subject']);
        if (UTIL.isNotEmpty(subjGroup[0]['subj-group'])) {
          this.joinCatalog(subjGroup[0]['subj-group'], subjDataStr);
        }
      }
    },
    joinEngCatalog(subjGroup, subjDataEngStr) {
      if (Object.prototype.toString.call(subjGroup) == '[object Object]') {
        subjDataEngStr.push(subjGroup['subject'])
      } else {
        subjDataEngStr.push(subjGroup[1]['subject']);
        if (UTIL.isNotEmpty(subjGroup[1]['subj-group'])) {
          this.joinEngCatalog(subjGroup[1]['subj-group'], subjDataEngStr);
        }
      }
    },
    showAuthor(metadata) {
      let param = new URLSearchParams();
      param.append("data", metadata);
      this.axios.post('/pmph/action/journal/selectShowAuthor', param)
        .then((response) => {
          this.authorData = response.data;
        })
    }
  },
  created() {
    this.formStyle = CONST.WORKSPACE_HEIGHT - 170 + 'px'
    this.metadataForm = JSON.parse(this.$route.query.metadata);
    // 展示作者信息
    this.showAuthor(this.$route.query.metadata);
    let subjGroup = this.metadataForm['article-categories']['subj-group'];
    let subjDataStr = [];
    let subjDataEngStr = [];
    this.joinCatalog(subjGroup, subjDataStr);
    this.subjData = subjDataStr.join('->');
    // article-categories 节点里可能没有英文，但是有别的属性，这里判定是否有xml:lang属性，且值为en
    if (subjGroup.filter(item => item['xml:lang'] === 'en').length > 0) {
      this.joinEngCatalog(subjGroup, subjDataEngStr);
      this.subjEngData = subjDataEngStr.join('->');
    }
    this.disabled = this.$route.query.disabled === 'true';
  },
  beforeRouteLeave(to, from, next) {
    to.meta.isUseCache = true;
    next();
  }
}
</script>

<style scoped>

.input-with-select {
  width: 400px;
  margin-top: 10px;
}

.inline-block {
  display: inline-block;
  margin-left: 10px;
}
</style>
